<template>
	<view  class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<view class="slotVue">
					<image
						src="../../static/back.png" 
						style="width: 38rpx; height: 38rpx; left: 30rpx;" 
						class="absolute-middle"
						@click="$tools.back(1)"
					></image>
					<text class="fw600 fs32 absolute-auto">我参加的活动</text>
				</view>
			</topVue>
		<!-- #endif -->
		
		<!-- 切换 -->
		<view class="tabVue">
			<u-subsection 
				:list="tabs" 
				:current="current" 
				@change="change" 
				height="80" 
				bg-color="#F4F4F4"
				inactive-color="#8F8E93"
				active-color="#FC132F"
			></u-subsection>
		</view>
		
		<!-- 内容 -->
		<view class="contentVue">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="current" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y="true" class="scrollVue">
						<view class="item" v-for="(o,i) in 5" :key="i">
							<view class="itemTop flex">
								<view class="img relative">
									<!-- <image src="" mode=""></image> -->
									<view class="state" :class="{active: current===1}">报名中</view>
								</view>
								<view class="right flex-column flex-between">
									<view class="name fw600">梦启缘桥，爱绽花季浪漫相 亲奇遇记</view>
									<view class="info line-1">07/07 14:30 武汉市洪山区东武汉市洪山区东</view>
									<view class="flex-between align-center">
										<div class="users flex">
											<!-- <u-avatar src="1" size="48" class="avatar" v-for="(oitem, oindex) in 4" :key="oindex"></u-avatar> -->
										</div>
										<view class="number">已报名<text>18</text>/40</view>
									</view>
								</view>
							</view>
							<view class="itemBot flex-between align-center">
								<view class="flex align-center">
									<text class="fs24 fw600">截止报名:</text>
									<u-count-down 
										:timestamp="timestamp" 
										separator="zh" 
										:bg-color="current===0?'#FC132F':'#81868e'" 
										font-size="24" 
										color="#fff"
										height="36"
										separator-size="24"
									></u-count-down>
								</view> 
								<view class="btn fs24 fw600" @click="$tools.route('/pages/activity/detail')" v-if="current===1">查看详情</view>
							</view>
							<view class="btnVue flex-between" v-if="current===0">
								<view class="cancel" @click="show = true">取消报名</view>
								<view class="matching" @click="$tools.route('../message/matching')">AI匹配</view>
								<view class="code">入场二维码</view>
							</view>
						</view>
						<u-gap height="20"></u-gap>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<u-modal 
			v-model="show" 
			content="确定取消该活动报名?"
			:show-cancel-button="true"
			confirm-color="#368BFC"
			cancel-color="#81868e"
			@confirm="confirm"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{name: "已报名"}, {name: "已结束"}],
				current: 0,
				show: false,
				timestamp: 10
			}
		},
		methods: {
			change(e){
				this.current = e
			},
			swiperChange(e){
				this.current = e.target.current
			},
			
			// 取消活动报名
			confirm(){
				
			}
		}
	}
</script>

<style lang="less" scoped>
.page {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.slotVue {
		width: 100%;
		height: 100%;
	}
	.tabVue {
		width: 750rpx;
		height: 100rpx;
		padding: 10rpx 30rpx;
	}
	.contentVue {
		flex: 1;
		width: 100%;
		.swiper {
			width: 100%;
			height: 100%;
			.swiper-item {
				width: 100%;
				height: 100%;
				.scrollVue {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					.item {
						width: 100%;
						border-bottom: 1rpx solid #EEEEEE;
						padding: 30rpx 30rpx 0;
						.itemTop {
							width: 100%;
							height: 200rpx;
							.img {
								width: 320rpx;
								height: 200rpx;
								border-radius: 16rpx;
								background: #f5f5f5;
								.state {
									width: 108rpx;
									height: 44rpx;
									background: #FC9413;
									border-radius: 16rpx 0 16rpx 0;
									line-height: 44rpx;
									text-align: center;
									font-weight: 500;
									font-size: 24rpx;
									color: #FFFFFF;
								}
								.active {
									background: #81868e;
								}
							}
							.right {
								flex: 1;
								height: 200rpx;
								padding-left: 20rpx;
								.name {
									line-height: 1.4;
								}
								.info {
									font-size: 24rpx;
									color: #999999;
								}
								.avatar {
									margin-left: -16rpx;
								}
								.avatar:nth-child(1) {
									margin-left: 0;
								}
								.number {
									font-size: 24rpx;
									color: #999999;
									text {
										color: #333;
										font-weight: 600;
										padding-left: 5rpx;
									}
								}
							}
						}
						.itemBot {
							width: 100%;
							height: 123rpx;
							text {
								padding-right: 10rpx;
							}
							.btn {
								width: 140rpx;
								height: 56rpx;
								background: #FC9413;
								border-radius: 4rpx;
								line-height: 56rpx;
								text-align: center;
								color: #FFFFFF;
							}
						}
						.btnVue {
							width: 100%;
							padding-bottom: 30rpx;
							.cancel,.matching,.code {
								width: 200rpx;
								height: 56rpx;
								text-align: center;
								line-height: 56rpx;
								color: #FFFFFF;
								border-radius: 4rpx;
								font-size: 24rpx;
							}
							.cancel {
								background: #368BFC;
							}
							.matching {
								background: #FC9413;
							}
							.code {
								background: #FC132F;
							}
						}
					}
				}
			}
		}
	}
}
</style>
